<template>
	<div class="layout-pd">
		<el-card shadow="hover" v-loading="state.loading">
			<el-tabs v-model="state.activeName" @tab-click="handleClick">
                <el-tab-pane label="基础信息" name="first">
                    <jcxx ref="jcxxRef" @stepChange="stepChange"></jcxx>
                </el-tab-pane>
                <el-tab-pane label="商品详情" name="second">
                    <spxq ref="spxqRef" @stepChange="stepChange"></spxq>
                </el-tab-pane> 
                <el-tab-pane label="佣金设置" name="third">
                    <yjsz ref="yjszRef" @stepChange="stepChange"></yjsz>
                </el-tab-pane>
            </el-tabs>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="funCountup">
import {  onMounted, reactive, ref,defineAsyncComponent } from 'vue';
import type { storeNodeListData, channelListData } from "/@/types/order";
export type TStep = 'first' | 'second' | 'third';

const jcxx = defineAsyncComponent(() => import('/@/views/commodity/videoList/components/jcxx.vue'))
const spxq = defineAsyncComponent(() => import('/@/views/commodity/videoList/components/spxq.vue')) 
const yjsz = defineAsyncComponent(() => import('/@/views/commodity/videoList/components/yjsz.vue'))

const jcxxRef = ref();
const spxqRef = ref();

const state = reactive({
    activeName: 'first' as TStep,
	param: {
		type: 4,
		source: 0, // 0 门店 2 线上 //设置不了得值是哪个？
		mode: null, // 门店类型  null(默认) 全部 0 直营  1 加盟
		storeStatus:-1,
		nodeId: null, // 门店id
		// 销售渠道
		channel: null,
		status: null,
		cardType:-1,
		// 支付方式
		dateTime: [],
		startTime: "",
		endTime: "",
		timeInterval: 3,
		total: 0,
		keyword: "",
		pageNum: 1,
		pageSize: 10,
		change: 999,
		storeType: null as null | number,
		statistics: 1,
		rowId: -1
	},
	query: {
		orderSource: [
			{ value: 0, label: '门店订单' },
		],
		storeType: [
			{ value: null, label: '全部' },
			{ value: 0, label: '直营' },
			{ value: 1, label: '加盟' }
		],
		storeStatus:[
			{ value: -1, label: '全部' },
			{ value: 1, label: '正常' },
			{ value: 2, label: '闭店' },
			{ value: 3, label: '休息' }
		],
		staticticsCategory: [
			{ value: 1, label: '卡项销售' },
			{ value: 2, label: '卡项普及' },
			{ value: 3, label: '卡项消耗' },
			{ value: 4, label: '大数据画像' },
		],
		cardType: [
			{ value: -1, label: '全部' },
			{ value: 0, label: '疗程卡' },
			{ value: 1, label: '单次卡' },
			{ value: 2, label: '体验卡' },
		],
		storeList: [] as Array<storeNodeListData>,
		orderStatus: [
			{ value: null, label: '全部' },
			{ value: 4, label: '已服务' },
			{ value: 14, label: '已撤销' },
		],
		saleChannel: [] as Array<channelListData>,
		orderType:[
			{ value: 999, label: '全部订单' },
			{ value: 1, label: '换卡服务' },
			{ value: 2, label: '余卡服务' },
		]
	},
	loading: false,
	total: 0,
	tableData: [
		{
			id: 1,
			cardItemName: '测试',
			property: '属性名称',
			spec: '规格',
			salesVolume: '销量',
			cellPrice: '销售价格', 
		}
	] as Array<any>
		
})

const handleClick = ()=>{
    
}

const stepChange = (step: TStep) => { 
	state.activeName = step
}

</script>

<style scoped lang="scss">
</style>
